<template>
  <div class="detail">
    <!-- 顶部导航 -->
    <van-nav-bar title="文章详情" left-arrow />
    <!-- @click-left="onClickLeft" -->
    <div class="content">
      <!-- 文章标题 -->
      <h2>{{ artObj.title }}</h2>
      <!-- 作者信息 -->
      <div class="author">
        <van-image width="40" height="40" :src="artObj.aut_photo" round />
        <div class="msg">
          <div class="name">{{ artObj.aut_name }}</div>
          <div class="time">{{ artObj.pubdate | timefromnow }}</div>
        </div>
        <van-button @click="follow" v-if="!artObj.is_followed" type="info" round
          ><van-icon name="plus" />关注</van-button
        >
        <van-button @click="unfollow" v-else type="info" round
          ><van-icon name="success" />已关注</van-button
        >
      </div>
      <!-- 文章内容 -->
      <div class="art" v-html="artObj.content"></div>
      <div class="end">-- end --</div>
      <!-- 点赞区域 -->
      <div class="btn">
        <van-button
          v-if="artObj.attitude === 1"
          class="one"
          round
          plain
          type="primary"
        >
          <van-icon name="good-job-o" />点赞
        </van-button>
        <van-button v-else class="one" round plain>
          <van-icon name="good-job-o" />点赞
        </van-button>
        <van-button v-if="artObj.attitude === 0" round plain type="danger">
          <van-icon name="delete-o" />不喜欢
        </van-button>
        <van-button v-else round plain>
          <van-icon name="delete-o" />不喜欢
        </van-button>
      </div>
      <!-- 点击区域 -->
    </div>
     <comment></comment>
  </div>
</template>

<script>
import { getArticleApi, followAuthApi, unfollowAuthApi } from "@/api";
export default {
  data() {
    return {
      art_id: this.$route.query.id,
      artObj: {},
    };
  },
  methods: {
    async unfollow() {
        await unfollowAuthApi({
            target: this.artObj.aut_id,
        })
        // 提示成功
        this.$toast.success("取消成功");
        // 手动将状态改为关注
        this.artObj.is_followed = false;
    },
    async follow() {
        await followAuthApi({
            target: this.artObj.aut_id,
        })
        // 提示成功
        this.$toast.success("收获迷弟一枚");
        // 手动将状态改为关注
        this.artObj.is_followed = true;
    },
    async getArticle() {
      const res = await getArticleApi(this.art_id);
      // console.log(res);
      this.artObj = res.data.data;
    },
  },
  created() {
    this.getArticle();
  },
   components: {
    comment: () => import('./components/comment.vue')
  }
};
</script>

<style lang="less">
.detail {
  font-size: 16px;
  .content {
    padding: 0 10px;
  }
  .author {
    margin: 10px 0;
    display: flex;
    align-items: center;
    font-size: 16px;
    .msg {
      flex: 1;
      margin-left: 8px;
    }
  }
  .art {
    margin-top: 30px;
    // 让文本内容保存原本的间隔
    white-space: pre-wrap;
    // word-break: break-all;
    word-break: break-word;
    .img {
      width: 100%;
    }
    pre {
      // 将标识结构换行
      white-space: pre-wrap;
      // 让文本换行
      word-break: break-all;
    }
  }
  .end {
    text-align: center;
    color: #999;
    margin: 30px 0;
  }
  .btn {
    text-align: center;
    .one {
      margin-right: 30px;
    }
  }
}
</style>